<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-input
          style="margin-bottom: 10px"
          type="text"
          v-model="queryParams.keyword"
          prefix-icon="el-icon-search"
          size="small"
          placeholder="输入员工姓名全员搜索"
        />
        <!-- 树形组件 -->
        <el-tree
          ref="deptTree"
          node-key="id"
          :data="depts"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          highlight-current
          @current-change="selectNode"
        />
      </div>
      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button size="mini" type="primary" @click="$router.push('/employee/detail')">添加员工</el-button>
          <el-button size="mini" @click="showExcelDialog = true"
            >excel导入</el-button
          >
          <el-button size="mini" @click="exportEmployee">excel导出</el-button>
        </el-row>
        <!-- 表格组件 -->
        <el-table :data="list">
          <el-table-column prop="staffPhoto" align="center" label="头像">
            <template v-slot="{ row }">
              <el-avatar
                v-if="row.staffPhoto"
                :src="row.staffPhoto"
                :size="30"
              />
              <span v-else class="username">{{ row.username?.charAt(0) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="姓名" />
          <el-table-column prop="mobile" label="手机号" sortable />
          <el-table-column prop="workNumber" label="工号" sortable />
          <el-table-column prop="formOfEmployment" label="聘用形式">
            <template v-slot="{ row }">
              <span v-if="row.formOfEmployment === 1">正式</span>
              <span v-else-if="row.formOfEmployment === 2">非正式</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
            width="120"
            sortable
          />
          <el-table-column label="操作" width="280px">
            <template v-slot="{ row }">
              <el-button size="mini" type="text" @click="$router.push(`/employee/detail/${row.id}`)">查看</el-button>
              <el-button size="mini" type="text">角色</el-button>
              <el-button size="mini" type="text" @click="deleteMetaData(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
          style="height: 60px"
          align="middle"
          type="flex"
          justify="center"
        >
          <el-pagination
            :total="total"
            :page-size="queryParams.pagesize"
            :current-page="queryParams.page"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next,jumper"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
      <Import-excel
        :show-excel-dialog.sync="showExcelDialog"
        @uploadSuccess="getEmployeeList"
      />
    </div>
  </div>
</template>

<script>
import { transListToTreeData } from "@/utils";
import {
  getEmployeeListApi,
  delEmployeeApi,
  exportEmployee,
} from "@/api/employee";
import { getDepartmentListAPi } from "@/api/dapartment";
import FileSaver from "file-saver";
import ImportExcel from "./components/import-excel.vue";

export default {
  name: "Employee",
  components: { ImportExcel},
  data() {
    return {
      depts: [], // 组织数据
      showExcelDialog: false,
      showDetailDialog: false,
      defaultProps: {
        label: "name",
        children: "children",
      },
      list: [], // 员工列表数据
      // 存储查询参数
      queryParams: {
        departmentId: null,
        page: 1, // 当前页码
        pagesize: 10, // 每页条数
        keyword: "", // 关键字查询
      },
      total: 0, // 记录员工的总数
    };
  },
  created() {
    this.getDepartment();
  },
  methods: {
    async exportEmployee() {
      const result = await exportEmployee(); // 导出所有的员工接口
      // FileSaver.saveAs(blob对象,文件名称)
      FileSaver.saveAs(result, "员工信息表.xlsx"); // 下载文件
    },
    selectNode(node) {
      this.queryParams.departmentId = node.id;
    },
    async getDepartment() {
      // 递归方法 将列表转化成树形
      // let result = await getDepartment()
      this.depts = transListToTreeData(await getDepartmentListAPi(), 0);
      this.queryParams.departmentId = this.depts[0].id;
      // 设置选中节点
      // 树组件渲染是异步的 等到更新完毕
      this.$nextTick(() => {
        // 此时意味着树渲染完毕
        this.$refs.deptTree.setCurrentKey(this.queryParams.departmentId);
      });
      // 这个时候参数 记录了id
      this.getEmployeeList();
    },
    // 获取员工列表的方法
    async getEmployeeList() {
      const res = await getEmployeeListApi(this.queryParams);
      this.list = res.rows;
      this.total = res.total;
    },
    deleteMetaData(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await delEmployeeApi(id);
        this.$message.success("删除成功");
        this.getEmployeeList();
      });
    },
    handleCurrentChange(currentPage) {
      this.queryParams.page = currentPage;
      this.getEmployeeList();
    },
    handleSizeChange(page) {
      this.queryParams.pagesize = page;
      this.getEmployeeList();
    },
  },
  watch: {
    "queryParams.keyword"(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getEmployeeList();
      }
    },
    deep: true,
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin: 10px;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04c9be;
      font-size: 12px;
      display: inline-block;
    }
  }
}
</style>
